<template>
  <div class="stock-stock-list-modal">
    <a-modal
      :visible="visible"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      :footer="null"
      centered
      :mask="false"
      width="60%"
    >
      <a-tabs :size="'small'">
        <a-tab-pane tab="Tab 1" key="1">
          <s-table
            ref="table"
            size="default"
            rowKey="key"
            :columns="columns"
            :data="loadData"
            showPagination="auto"
            :scroll="{ x: false, y: 400 }"
            :pageSize="40"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleEdit(record)">配置</a>
                <a-divider type="vertical" />
                <a @click="handleSub(record)">订阅报警</a>
              </template>
            </span>
          </s-table>
        </a-tab-pane>
        <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import TableList from '@/views/list/TableList'
import { STable, Ellipsis } from '@/components'
import { getServiceList } from '@/api/manage'
export default {
  components: { TableList, STable, Ellipsis },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      confirmLoading: false,
      queryParam: {},
      columns: [
        {
          title: '规则编号',
          width: 100,
          dataIndex: 'no'
        },
        {
          title: '描述',
          dataIndex: 'description',
          width: 150
        },
        {
          title: '服务调用次数',
          dataIndex: 'callNo',
          sorter: true,
          needTotal: true,
          width: 150,
          customRender: text => text + ' 次'
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 150
        },
        {
          title: '更新时间',
          dataIndex: 'updatedAt',
          sorter: true,
          width: 150
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getServiceList(Object.assign(parameter, this.queryParam)).then(res => {
          return res.result
        })
      }
    }
  },
  methods: {
    handleCancel () {
      this.$emit('handleCancel')
    }
  }
}
</script>

<style scoped>
</style>
